
<!DOCTYPE html>
<html lang="zh">
<head>
  <meta charset="UTF-8">
  <title>许愿墙 - 提交愿望</title>
  <style>
    body { font-family: sans-serif; padding: 20px; background: #f0f0f0; }
    .form-box { background: white; padding: 20px; border-radius: 10px; width: 300px; margin: auto; box-shadow: 0 0 10px #ccc; }
    .form-box input, .form-box textarea, .form-box button {
      display: block; width: 100%; margin-top: 10px; font-size: 1em;
    }
    #message { margin-top: 10px; color: green; }
    /* 许愿墙便签样式 */
    .wish-note {
      padding: 10px;
      border-radius: 8px;
      box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.2);
      color: #333;
      width: 200px;
      cursor: move;
    }
  </style>
</head>
<body>

  <!-- 便签位置 -->
  <div id="wishBoard"></div>
  <!-- 提交框位置 -->
  <div class="form-box">
    <h2>我要许愿 ✨</h2>
    <form id="wishForm">
      <input type="text" id="name" placeholder="你的名字" maxlength="50" required>
      <textarea id="content" placeholder="说出你的愿望..." maxlength="300" required></textarea>
      <button type="submit">提交愿望</button>
    </form>
    <div id="message"></div>
  </div>

  <script>
    
    const form = document.getElementById('wishForm');//表单区域
    const msg = document.getElementById('message');//提示消息区域 成功或者失败的位置
    const board = document.getElementById('wishBoard')//许愿池便签区域

    form.onsubmit = async (e) => {
      e.preventDefault();//阻止表单的默认提交（误触）否则页面会自动刷新

      //获取用户输入的昵称和许愿内容，并且用trim去掉首尾空格
      const name = document.getElementById('name').value.trim();
      const content = document.getElementById('content').value.trim();

      //简单的前端表单校验 姓名和内容为空时 禁止提交
      if (!name || !content) {
        msg.style.color = 'red';
        msg.textContent = '姓名和愿望内容不能为空！';
        return;//达成上述条件，程序直接终止
      }

      //使用fetch API 发送POST 请求 到后台端口 ，将数据以JSON格式返回
      const res = await fetch('http://localhost:3000/api/wishes', {
        method: 'POST',//请求方式是POST 表示向服务器提交数据
        headers: { 'Content-Type': 'application/json' },//告诉服务器，我前台传输的是JSON格式
        body: JSON.stringify({ name, content })//将结构化数据转换成字符串 （方便网络传输）
      });

      const result = await res.json();//解析服务器返回的JSON响应 

      if (res.ok) {//服务器状态码 200 = ok 
        msg.style.color = 'green';
        msg.textContent = result.message;
        form.reset();//成功则表单重置，为下一次输入做准备
        loadWishes();
      } else {
        msg.style.color = 'red';
        msg.textContent = result.error || '提交失败，请稍后再试。';
      }
    };

    //生成随机颜色的方法
    function randomColor(){
      const colors = ["#FFD700","#FFA07A","90EE90","#87CEFA","FFB6C1"];
      return colors[Math.floor(Math.random()*colors.length)];
    }

    //渲染一条愿望，为便签的样式 ，“贴到”页面上
    function renderWish(wish){
     //创建一个新的div元素作为便签
     const note =  document.createElement("div");
     //设置CSS类名 
     note.className = "wish-note";
     //设置便签内容
     note.textContent = `${wish.name}:${wish.content}`;
     //为便签分配一个随机颜色
     note.style.backgroundColor = randomColor();
     //随机位置 需要将便签设置为绝对定位
     note.style.position = "absolute"
     //设置便签的纵向定位(页面中10% - 90% 之间)
     note.style.top  = `${Math.random()*80 +10}%`
      //设置便签的横向定位(页面中10% - 90% 之间)
     note.style.left  = `${Math.random()*80 +10}%`
     //让便签能拖动
     note.setAttribute("draggable",true)
     //双击移除便签
     note.ondblclick = () => note.remove()
     //把这个生成好的便签  追加到之前定义好的愿望墙区域
     board.appendChild(note)
    }
    
    //从数据库加载愿望数据  
    //从后台服务器中 获取愿望的具体数据，展示在前端页面中
    async function loadWishes() {
      //向服务器发送get请求 ，获取最近10条愿望数据
      const res  = await fetch("http://localhost:3000/api/wishes");
      //将服务器响应的结果转换成JSON格式 
      const wishes = await res.json()
      //清空愿望墙中的旧内容 避免重复渲染
      board.innerHTML = ""
      //对于每一条愿望 调用renderWish 函数 ，生成一个便签并添加到页面中
      wishes.forEach(renderWish);
    }
    //页面加载完页面之后自动执行加载愿望函数
    loadWishes();
  </script>

</body>
</html>
